<template>
  <button @click="refresh">点击，开始调用接口</button>
  <button @click="url = 'http://localhost:3000/users/2'">修改，接口地址</button>

  <hr />

  <div v-if="error">
    <p>Oops! Error encountered: {{ error.message }}</p>
  </div>

  <div v-else-if="person">
    <p>用户Id: {{ person.id }}</p>
    <p>用户Name: {{ person.name }}</p>
  </div>

  <div v-else-if="loading">加载中...</div>
</template>

<script>
import { ref } from "vue";
import useFetch from "./hooks/useFetch";

export default {
  setup() {
    const url = ref("http://localhost:3000/users/1");

    const {
      isFetching,
      error,
      data,
      execute: refresh,
    } = useFetch(url, {
      immediate: false,
      refetch: true,
    });

    return {
      url,
      loading: isFetching,
      person: data,
      error,
      refresh,
    };
  },
};
</script>
